<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-once>这个标签内容不会改变{{msg}}</span>
			
			<p>Using mustanches:{{rawHtml}}</p>
			<p>Using v-html directive:<span v-html="rawHtml"></span></p>
			<div v-html="rawHtml"></div>
			<p v-bind:class="red">我来测试</p>
			
			<p>{{number+1}}</p>
			<p>{{ok?'yes':'no'}}</p>
			<p>{{msg.split('').reverse().join('')}}</p>
			<button v-bind:disabled="isButtondisabled">button</button>
			
			<div v-bind:id="'list-'+d1">div</div>
		</div>	
		<script>
			var app=new Vue({
				el:'#app',
				data:{
					msg:'hello',
					d1:'d1',
					rawHtml:'<span style="color:red">This should be red</span>',
					red:'red',
					number:10,
					ok:1,
					isButtondisabled:true
				}
			});
			console.log(app.msg);
			
		</script>	
		<style>
			.red{color: red;}
			.blue{color: blue;font-size: 100px;}
		</style>
	</body>
</html>
